import {connect} from 'react-redux';
var React = require('react');
var ReactDOM = require('react-dom');
var token = $.cookie('token');
var mytoken = JSON.parse(token);
var StageMenu = React.createClass({
    componentWillMount: function () {
        var _this = this;
        $.ajax({
            type: "GET",
            url: "/api/Employee/GetMenu",
            headers: {
                Authorization: "Bearer " + mytoken.access_token
            },
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                _this
                    .props
                    .changeUserMenu(data);
            },
            error: function (msg) {
                alert(msg);
            }
        });
    },
    render: function () {
        return (
            <div id="stage-menu">
                <aside className="main-sidebar">
                    <section className="sidebar">
                        <div id="user-panel">
                            <div className="user-panel">
                                <div className="pull-left image">
                                    <img
                                        className="img-circle"
                                        alt="User Image"
                                        src={this.props.userDetails.UserAvatar}></img>
                                </div >
                                <div className="pull-left info">
                                    <p>
                                        {this.props.userDetails.NickName}
                                    </p>
                                    <a href="#">
                                        < i className="fa fa-circle text-success"></i>
                                        在线</a >
                                </div>
                            </div >
                        </div>

                        <ul className='sidebar-menu'>
                            <li className="header">STAGE后台管理</li>
                            {this.getMenu()}
                        </ul>

                    </section>
                </aside>
            </div>
        )
    },
    getMenu: function () {
        return this
            .props
            .userMenu
            .Childrens
            .map(currentMenu => {
                if (currentMenu.Childrens.length > 0) {
                    return (
                        <li key={currentMenu.MenuId}>
                            <a href='#' className='menu'>
                                <i className='fa fa-link'></i>
                                <span>{currentMenu.MenuName}</span>
                                <span className='pull-right-container'>
                                    <i className='fa fa-angle-left pull-right'></i>
                                </span>
                            </a>
                            <ul className='treeview-menu'>
                                {this.getMenuChildrens(currentMenu)}
                            </ul>
                        </li>
                    )
                } else {
                    return (
                        <li key={currentMenu.MenuId}>
                            <a href='#' className='menu'>
                                <i className='fa fa-circle-o'></i>{currentMenu.MenuName}
                            </a>
                        </li>
                    )
                }
            })
    },
    getMenuChildrens: function (menu) {
        return menu
            .Childrens
            .map(currentMenu => {
                if (currentMenu.Childrens.length > 0) {
                    return (
                        <li key={currentMenu.MenuId}>
                            <a href='#' className='menu'>
                                <i className='fa fa-circle-o'></i>
                                <span>{currentMenu.MenuName}</span>
                                <span className='pull-right-container'>
                                    <i className='fa fa-angle-left pull-right'></i>
                                </span>
                            </a>
                            {getMenuChildrens(currentMenu)}
                        </li>
                    )
                } else {
                    return (

                        <li key={currentMenu.MenuId}>
                            <a
                                href={"http://localhost:27651/Home/Index#/" + currentMenu.Route}
                                className='menu'>
                                <i className='fa fa-circle-o'></i>{currentMenu.MenuName}</a>
                        </li>
                    )
                }
            })
    }

})
const mapStateToProps = (state) => {
    return {userMenu: state.userMenu, userDetails: state.userDetails}
}
const mapDispatchToProps = {
    changeUserMenu: (data) => {
        return {type: 'CHANGE_USERMENU', data: data}
    }
}
StageMenu = connect(mapStateToProps, mapDispatchToProps)(StageMenu)
module.exports = StageMenu;